// 加载路由模块
import VueRouter from 'vue-router';
// 为项目安装路由功能
import Vue from 'vue';



Vue.use(VueRouter);


import HomePage from '../views/HomePage';

// 当定义懒加载后要注释引入信息
// import FilmsPage from '../views/FilmsPage';
// import DetailPage from '../views/DetailPage';

// 创建路由对象 new VueRouter(options);
//    通过options 完成路由的配置， 取值为Object对象
const router = new VueRouter({
    mode:"hash",
    routes:[
        {
            path:"/",
            redirect:"/home"
        },
        {
            path:"/home",
            name:"home",
            component:HomePage,
            meta:{
                // 数据与 key:value的方式任意定义
                hideBack:true
            }
        },
        {
            path:"/films",
            name:"films",
            // component:FilmsPage
            /*
                webpackChunkName:"文件名" 定义懒加载组件的定义规则
                vue 打包时，会根据该配置项定义的文件名称，将当前路由组件打包成一个独立的JS文件
                如果多个路由组件使用了相同的文件名，会将这些组件合并成一个文件

            */
            component:() => import(/* webpackChunkName: "films" */ '../views/FilmsPage.vue')
        },
        {
            path:"/detail/:filmId",
            name:"detail",
            // component:DetailPage
            component:() => import(/* webpackChunkName: "detail" */ '../views/DetailPage.vue'),
            meta:{
                name:"detail",
                useBottom:true,
                bottom:"FooterBox"
            }
        },
        {
            path:"*",// 通配符*匹配所有没被路由定义的地址
            component:() => import(/* webpackChunkName: "notfound" */ '../views/NotFound.vue')
        }
    ]
});

// 对外公开路由功能
export default router;

// 将路由对象和项目容器在main.js文件中进行功能对接 
/*
    new Vue({
        router,
        render: h => h(app),
    }).$mount('#app')
*/